import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import { Modal, Space, Row, Col, Button, Tag } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import { secKill_status } from '@/common/contact';
const manageMash = (props) => {
    const { visible = false, onClose, dispatch, loading, onOk, secKillList } = props;
    const { show, details = {} } = visible;
    const { list = [] } = details;
    const childRef = useRef();
    useEffect(() => {
        if (!show) {
            setSelectedRowKeys([]);
        } else {
            setSelectedRowKeys(list)
        }
    }, [show]);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const rowSelection = {
        onChange: (val, selectedRows, info) => {
            setSelectedRowKeys(selectedRows);
        },

        selectedRowKeys: selectedRowKeys.map((item) => {
            return item.id.toString();
        }),
    };
    const searchItems = [{ label: '关键词', name: 'keyword' }];

    const getColumns = [
        {
            title: '活动名称',
            dataIndex: 'secKillName',
        },
        {
            title: '活动状态',
            dataIndex: 'status',
            render: (e) => {
                const renderStatus = {
                    0: <Tag color="warning">{secKill_status[e]}</Tag>,
                    1: <Tag color="success">{secKill_status[e]}</Tag>,
                    2: <Tag color="#f50">{secKill_status[e]}</Tag>,
                    3: <Tag color="default">{secKill_status[e]}</Tag>,
                }[e];
                return renderStatus;
            },
        },
        {
            title: '有效期',
            dataIndex: 'secKillStartTime',
            render: (e, record) => {
                const { secKillStartTime, secKillEndTime } = record;
                return (
                    <Space direction={'vertical'}>
                        <div>起：{secKillStartTime}</div>
                        <div>止：{secKillEndTime}</div>
                    </Space>
                );
            },
        },
        {
            title: '活动商品总量',
            dataIndex: 'secKillStock',
        },
    ];
    const modalProps = {
        title: `选择限时活动`,
        width: 1200,
        visible: typeof visible === 'boolean' ? visible : show,
        maskClosable: true,
        destroyOnClose: true,
        zIndex: 1001,
        onOk: () => {
            onOk(selectedRowKeys.map(item => {
                return {
                    ...item,
                    cover: item.goodsCover
                }
            }))
            onClose()
        }

    };

    return (
        <Modal {...modalProps} onCancel={onClose}>
            <Row>
                <Col span={24}>
                    <TableDataBlock
                        style={{ width: '100%' }}
                        rowSelection={{
                            type: 'checkbox',
                            ...rowSelection,
                        }}
                        cRef={childRef}
                        loading={loading}
                        searchItems={searchItems}
                        columns={getColumns}
                        rowKey={(record) => `${record.id}`}
                        dispatchType="liveStreaming/fetchListGoodsSecKill"
                        {...secKillList}
                    ></TableDataBlock>
                </Col>
            </Row>

        </Modal>
    );
};

export default connect(({ liveStreaming, loading }) => ({
    secKillList: liveStreaming.secKillList,
    loading: loading.models.liveStreaming,
}))(manageMash);
